import React, { Component } from 'react';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Row,
  Col,
  Input,
  Modal,
  Button,
  Table,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

interface SaveExpressProps extends FormComponentProps {
  saveVisible: boolean;
  lookupList: any;
  id: number;
  handleCancel: (value: boolean) => void;
  fetchAction: (typeName: string, payload: any) => void;
}

interface SaveExpressState {
  searchValues: {
    name: string,
    pageIndex: number,
    pageSize: number,
    tariffId: number,
  };
  formIds: number[];
}

class SaveExpressElem extends Component<SaveExpressProps, SaveExpressState> {
  columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '公司名称',
      dataIndex: 'name',
    },
    {
      title: '固定电话',
      dataIndex: 'telephone',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
  ]

  state: SaveExpressState = {
    searchValues: {
      name: '',
      pageIndex: 1,
      pageSize: 5,
      tariffId: 0,
    },
    formIds: [],
  }

  componentDidMount() {
    const { id: tariffId } = this.props;
    const { searchValues } = this.state;

    const params = { ...searchValues, tariffId };
    this.setState({ searchValues: params });
  }

  handleCancel = () => {
    const { handleCancel } = this.props;
    handleCancel(false);
  }

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((errors, values) => {
      if (errors) return;

      const { id: tariffId } = this.props;
      const searchValues = {
        pageIndex: 1,
        pageSize: 5,
        tariffId,
        ...values,
      };
      this.setState({ searchValues }, () => {
        const { fetchAction } = this.props;
        fetchAction('fetchAllExpressList', searchValues);
      });
    });
  }

  handleSave = () => {
    const { id: tariffId } = this.props;
    const { formIds } = this.state;
    const expressIdList = formIds.join(',');

    const params = {
      searchValues: { tariffId, pageIndex: 1, pageSize: 5 },
      payload: { tariffId, expressIdList },
    };

    const { fetchAction } = this.props;
    fetchAction('saveExpress', params);

    this.handleCancel();
  }

  handleInit = () => {
    const { form: { resetFields } } = this.props;
    resetFields(['name']);

    this.setState({
      searchValues: {
        name: '',
        pageIndex: 1,
        pageSize: 5,
        tariffId: 0,
      },
      formIds: [],
    });
  }

  selectPageOper = (pageIndex: number, pageSize: number) => {
    const { id: tariffId } = this.props;
    const { searchValues } = this.state;
    const new_searchValues = {
      ...searchValues,
      tariffId,
      pageIndex,
      pageSize,
    };

    this.setState({ searchValues: { ...new_searchValues } });

    const { fetchAction } = this.props;
    fetchAction('fetchAllExpressList', new_searchValues);
  }

  render() {
    const { searchValues } = this.state;
    const {
      form: { getFieldDecorator },
      saveVisible,
      lookupList,
    } = this.props;

    const dataSource = lookupList ? lookupList.list : [];
    const pagination: object = lookupList
      ? {
        total: lookupList.count,
        current: searchValues.pageIndex,
        pageSize: searchValues.pageSize,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10'],
        onChange: this.selectPageOper,
        onShowSizeChange: this.selectPageOper,
      }
      : {};

    const rowSelection = {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        this.setState({ formIds: selectedRowKeys });
      },
    };
    return (
      <Modal
        title="添加合作快递公司"
        centered
        width={800}
        visible={saveVisible}
        destroyOnClose
        onOk={this.handleSave}
        onCancel={this.handleCancel}
        okText="添加"
        afterClose={this.handleInit}
      >
        <Form className="tableListForm" onSubmit={this.handleSearch}>
          <Row>
            <Col md={16} sm={24}>
              <Form.Item label="名称" colon={false} className="marginB0Import">
                {getFieldDecorator('name')(<Input placeholder="输入名称查询" />)}
              </Form.Item>
            </Col>
            <Col md={8} sm={24} className="paddingL20">
              <Button
                type="primary"
                htmlType="submit"
              >查询
              </Button>
            </Col>
          </Row>
        </Form>
        <Table
          className="tableList statementTable marginT12"
          rowKey="id"
          rowSelection={rowSelection}
          dataSource={dataSource}
          columns={this.columns}
          pagination={pagination}
        />
      </Modal>
    );
  }
}

export default Form.create<SaveExpressProps>()(SaveExpressElem);
